<template>
    <a-card title="职位管理" style="width: 100%">
    <div class="top">
        <div class="ltop">
            <a-select v-model:value="getcanshu.audit"  @change="onSearch">
                <a-select-option value="zero">不限审核状态</a-select-option>
                <a-select-option value="0">待审核</a-select-option>
                <a-select-option value="1">已通过</a-select-option>
                <a-select-option value="2">未通过</a-select-option>
            </a-select>
            <a-select v-model:value="getcanshu.state" @change="onSearch">
                <a-select-option value="zero">不限招聘状态</a-select-option>
                <a-select-option value=False>已暂停</a-select-option>
                <a-select-option value=True>招聘中</a-select-option>
            </a-select>
        </div>
        <div class="rtop">
            <a-input-group compact>
            
            <a-input-search
            v-model:value="getcanshu.search"
            placeholder="请输入搜索内容"
            @search="onSearch"
            style="height:32px;width: 200px;"
            />
            </a-input-group>
        </div>
    </div>
    <!-- <a-table :dataSource="list" :columns="columns" :rowKey='record=>record.id'>

    </a-table> -->
    <a-table :columns="columns" :dataSource="list" rowKey="id" >
      <template #tel={record}>
          <TeamOutlined />{{record.member_mobile_phone_number}}
          <br><ExceptionOutlined />{{record.Position_mobile_phone_number}}
        </template>
        <template #audit_status={record}>
            <a-button  type="primary"  v-if="(record.audit_status == 0)">待审核</a-button>
            <a-button type="primary" style="background:green;" v-else-if="(record.audit_status == 1 )">已通过</a-button>
            <a-button type="primary" danger v-else-if="(record.audit_status == 2 )">未通过</a-button>
        </template>
        <template #btime={record}>
          <FieldTimeOutlined />{{record.create_time}}
          <br><FieldTimeOutlined />{{record.update_time}}
        </template>
        <template #ztype={record}>
          <a-button  type="primary"  v-if="(record.company_type)">招聘中</a-button>
            <a-button type="primary" danger v-else>已暂停</a-button>
        </template>
        <template #tui={record}>
          <a-button type="link" @click="showModal(record.poster)" ghost>[推广]</a-button>
          <a-button type="link"  ghost  @click="fuzhi(`${record.company_name}`)">[复制]</a-button>
        </template>

        <template #cao={record}>
            <a-button type="primary" >管理</a-button> &nbsp;
            <a-button type="primary" @click="bianji({...record})" >编辑</a-button>&nbsp;
            <a-button type="ghost" @click="showModa2(record.audit_status,record.id)">审核</a-button>&nbsp;
            <a-button  type="primary" @click="deldata(record.id)" danger>删除</a-button>
        </template>
    </a-table>
  </a-card>

    <a-modal v-model:visible="visible" title="推广图片"  width="615px" @ok="handleOk">
      <img :src="tuiguangimg" alt="">
    </a-modal>
    <a-modal v-model:visible="p.visible" title="将所选职位设置为"  width="615px" @ok="handleOk22">
      认证状态
      
      <a-radio-group name="审核" v-model:value="p.audit_status">
    <a-radio :value=0>待审核</a-radio>
    <a-radio :value=1>已通过</a-radio>
    <a-radio :value=2>未通过</a-radio>
  </a-radio-group>
    </a-modal>
</template>

<script lang="ts" setup>

import {toRefs,onMounted,reactive} from 'vue'
import {getJobData,delJobData,putJobData} from '../../../api/job'
import { FieldTimeOutlined ,TeamOutlined,ExceptionOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router'
const router = useRouter()
let lisdata = reactive({
    list:[], // 获取数据
    visible : false,
    p:{
      visible : false,
      audit_status :0,
      id:''
    },
    tuiguangimg:'',
    getcanshu:{  // get获取参数
      audit:'zero', // 审核状态
      state:"zero",  // 招聘状态
      search:'',  // 搜索
      page:1,   // 当前页数 
      pagesize:10 // 每一页多少条数据
    }
})
/*复制命令兼容各种浏览器*/
const fuzhi =  (copyContent:string)=> {
            var copyTextarea = document.createElement("textarea");
            document.body.appendChild(copyTextarea);
            copyTextarea.innerText = copyContent;
            copyTextarea.select();            
            document.execCommand("Copy");
            copyTextarea.remove()
}



const showModal = (url:any) => {
      lisdata.visible = true;
      lisdata.tuiguangimg = url
    };
const showModa2 = (url:any,id:any) => {
      lisdata.p.visible = true;
      lisdata.p.audit_status = url
      lisdata.p.id = id
    };

const handleOk = (e:any) => {
  lisdata.visible = false;
};
const handleOk22 = async (e:any) => {
  await putJobData({'audit_status':lisdata.p.audit_status,'id':lisdata.p.id})
  getdata(lisdata.getcanshu)
  lisdata.p.visible = false;
};
const deldata = async(id:any)=>{
  await delJobData(id)
  getdata(lisdata.getcanshu)
}



const onSearch=()=>{
  getdata(lisdata.getcanshu)
}
onMounted(()=>{
  getdata(lisdata.getcanshu)
})
const getdata = async (getcanshu:any)=>{  
    let {data} = await getJobData(getcanshu)
    lisdata.list = data.data
}



const bianji = (data:any) =>{
  console.log({...data});
  
  router.push({ path: `position/put`,query:data }) 
}

// const rowSelection = {
//   onChange: (selectedRowKeys: (string | number)[], selectedRows: any[]) => {
//     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
//   },
//   onSelect: (record: any, selected: boolean, selectedRows: any[]) => {
//     console.log(record, selected, selectedRows);
//   },
//   onSelectAll: (selected: boolean, selectedRows: any[], changeRows: any[]) => {
//     console.log(selected, selectedRows, changeRows);
//   },
// };
const columns = [
  {
    title: '职位名称',
    dataIndex: 'company_name',
    key: 'company_name',
  },
  {
    title: '会员/职位手机号',
    key: 'member_mobile_phone_number',
    slots:{customRender:'tel'}
  },
  {
    title: '审核状态',
    key: 'audit_status',
    slots: { customRender: 'audit_status' },
  },
  {
    title: '创建/刷新时间',
    key: 'create_time',
    slots: { customRender: 'btime' },
  },
  {
    title: '职位状态',
    key: 'ztype',
    slots: { customRender: 'ztype' },
  },
  {
    title: '推广',
    key: 'tuiguang',
    slots: { customRender: 'tui' },
  },
  {
    title:'操作',
    key:'cao',
    slots:{customRender:'cao'}
  }
];

let {list,getcanshu,visible,tuiguangimg,p} = toRefs(lisdata)

</script>







<style scoped>
.top{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
}
.ltop .ant-select{
    margin-right: 20px;
}
.rtop{
    display: flex;
}
.rtop .ant-select{
    width: 100px;
    border-right: none;
}
</style>